<template>
  <div class="container">
    <div class="row">
      <div class="col-12 pt-3">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th scope="col">编号</th>
              <th scope="col">科目</th>
              <th scope="col">成绩</th>
              <th scope="col">考试时间</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr :key="item.id" v-for="(item, index) in list">
              <th scope="row">{{ item.id }}</th>
              <td>{{ item.subject }}</td>
              <td :style="{ color: item.score < 60 ? 'red' : '' }">
                {{ item.score }}
              </td>
              <td>{{ myFormat2(item.time) }}</td>
              <td>
                <button type="button" @click="del(index)" class="btn btn-link">
                  删除
                </button>
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td class="text-center" colspan="1">分数</td>
              <td colspan="2">总分：0</td>
              <td colspan="2">平均分：0</td>
              <!-- <td colspan="2">总分： {{ totalScore }}</td>
              <td colspan="2">平均分：{{ avaScore }}</td> -->
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <form @submit.prevent="add()" class="row align-items-center">
      <div class="col-3">
        <input
          type="text"
          class="form-control"
          v-model.trim="subject"
          value="subject"
          placeholder="请输入科目"
        />
      </div>

      <div class="col-3">
        <input
          type="text"
          class="form-control"
          v-model.number="score"
          value="score"
          placeholder="请输入分数"
        />
      </div>

      <div class="col-3">
        <button type="submit" class="btn btn-primary">添加</button>
      </div>
    </form>
  </div>
</template>

<script>
import dayjs from "dayjs";
import moment from "moment";

export default {
  name: "App",
  data() {
    return {
      subject: "",
      score: "",
      html: ``,
      // list:[  {
      //     id: 100,
      //     subject: "语文",
      //     score: 99,
      //     time: new Date("2010-08-12"),
      //   },
      //   {
      //     id: 101,
      //     subject: "数学",
      //     score: 34,
      //     time: new Date("2020-09-01"),
      //   },
      //   {
      //     id: 102,
      //     subject: "英语",
      //     score: 25,
      //     time: new Date("2018-11-22"),
      //   },
      //   {
      //     id: 103,
      //     subject: "体育",
      //     score: 100,
      //     time: new Date("2020-12-12"),
      //   },]
      list: JSON.parse(localStorage.getItem("list"))
        ? JSON.parse(localStorage.getItem("list"))
        : [],
    };
  },
  methods: {
    myFormat(time) {
      return dayjs(time).format("YYYY-MM-DD hh-mm-ss");
    },
    myFormat2(time) {
      return moment(time).format("YYYY-MM-DD hh-mm-ss");
    },
    del(index) {
      this.list.splice(index, 1);
    },
    add() {
      const obj = {
        id: this.list.length>0 ? this.list[this.list.length - 1].id + 1 : 1,
        subject: this.subject,
        score: this.score,
        time: new Date(),
      };
      this.list.push(obj);
      this.subject = ``;
      this.score = ``;
    },
  },

  computed: {
    // totalScore() {return this.list.reduce((s,v)=>s+v.score,0)},
    // avaScore() { return this.totalScore/this.list.length},
  },

  watch: {
    list(nv) {
      console.log(nv);
      localStorage.setItem("list", JSON.stringify(nv));
    },
  },
};
</script>

<style >
</style>